<template>
	<HxNavbar title="商品搜索"></HxNavbar>
	<!-- 搜索框 -->
	<view class="u-padding-10">
		<u-search bg-color="#fff" input-align="center" v-model="state.keyword" @search="doSearch" @custom="doSearch" :focus="true"></u-search>
	</view>
	<!-- 搜索历史 -->
	<view class="search-record">
		<view class="header"> <view> 搜索历史 </view> <u-icon name="trash" @click="delAll"></u-icon> </view>
		<view class="content u-padding-top-20">
			<view class="u-padding-10" v-for="(item, index) in state.searchHistoryList">
				<u-tag border-color="#fff" bg-color="#fff" color="#3a3a3a" :text="item" shape="circle" @click="doSearch(item)" />
			</view>
		</view>
	</view>
	<!-- 热搜排行 -->
	<view class="hot-top">
		<view class="header"> <view> 销量排行 </view></view>
		<view class="content">
			<view class="item" v-for="(item, index) in state.hotTopList" :key="index" @click="toGoods(item.id)">
				<view class="rank" :class="'rank' + index"> {{ index + 1 }}</view>
				<u-image border-radius="15" v-if="index < 3" width="100rpx" height="100rpx" :src="item.spuUrls[0]"></u-image>
				<view class="name u-line-1" :class="'rank' + index">
					{{ item.name }}
				</view>
				<view class="hot-num">{{ item.salesVolume }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getPage } from '@/api/product/spu';
import { Local } from '@/utils/storage';
interface State {
	hotTopList: Array<any>;
	searchHistoryList: Array<string>;
	keyword: string;
}
// 定义变量
const state = reactive<State>({
	hotTopList: [],
	searchHistoryList: [],
	keyword: '',
});
onShow(() => {
	if (Local.get('search-history')) {
		state.searchHistoryList = Local.get('search-history');
	}
});
onLoad((options) => {
	if (options?.keyword && options?.keyword != 'undefined') {
		state.keyword = options.keyword;
	}
	getHotTop();
});
// 搜索
const doSearch = (name: string) => {
	if (name) {
		state.keyword = name;
		//过滤重复搜索
		state.searchHistoryList = state.searchHistoryList.filter((v) => v != name);
		// 数组头部插入
		state.searchHistoryList.unshift(name);
		//缓存搜索记录
		Local.set('search-history', state.searchHistoryList);
	}
	// 跳转商品列表
	uni.$hxRouter.push('/pages/product/goods-list/index?keyword=' + state.keyword);
};
// 删除全部搜索记录
const delAll = () => {
	Local.remove('search-history');
	state.searchHistoryList = [];
};
const getHotTop = () => {
	getPage({
		current: 1,
		size: 10,
		descs: 'sales_volume',
	}).then((res) => {
		state.hotTopList = res.data.records;
	});
};
const toGoods = (id: string) => {
	uni.$hxRouter.push('/pages/product/goods-detail/index?id=' + id);
};
</script>

<style lang="scss">
.search-record {
	padding: 20rpx;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
	}
}
.hot-top {
	padding: 20rpx;
	.header {
	}
	.content {
		margin-top: 20rpx;
		background: linear-gradient(rgb(255, 238, 246), rgb(248, 248, 248));
		padding: 20rpx;
		border-radius: 20rpx;
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.rank {
				padding-right: 20rpx;
				font-weight: 700;
				color: #c7c7c7;
			}
			.rank0 {
				color: #f73131;
			}
			.rank1 {
				color: #ff6652;
			}
			.rank2 {
				color: #fccd93;
			}
			.name {
				margin: 0 10rpx;
				flex: 1;
			}
			.hot-num {
				display: flex;
				justify-content: flex-end;
				font-size: 14px;
				color: #909399;
			}
		}
	}
}
</style>
